<template>
  <Layout class="layout-100">
    <Header class="header-cont">{{name}}</Header>
    <Content class="content-cont">
      <Form ref="formData" :model="formData" label-position="top">
        <Row>
          <Col span="24">
          <FormItem label="管控措施" :required="true">
            <Input style="width:350px;" v-model.trim="formData.measures" maxlength="60" placeholder="请输入管控措施" />
          </FormItem>
          </Col>
          <Col span="24">
          <FormItem label="频次">
            <Select v-model="formData.frequencyId" style="width:350px;" placeholder="请选择">
              <Option v-for="item in list" :value="item.id" :key="item.id">{{ item.frequencyName }}</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="24">
          <FormItem label="措施类型" :required="true">
            <Select v-model="formData.measureType" style="width:350px;" placeholder="请选择措施类型">
              <Option v-for="item in measureTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          </Col>
          <FormItem label="动态管控岗" :required="true">
            <Table border :columns="columns" :data="tableForm">
            </Table>
          </FormItem>
        </Row>
      </Form>
    </Content>
    <Footer class="footer-cont">
      <Button type="primary" @click="saveSubmit()">提交</Button>
      <Button @click="closetab(0)">取消</Button>
    </Footer>
  </Layout>

</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    name: 'add-measures',
    data() {
      return {
        formData:{},
        frequencyName:'',//选中名称
        tableForm:[{
          projectManagementDepartment: "",
          projectManagementLeader: "",
          leaderInChargeOfProjectDepartment: "",
          controlDepartmentOfEngineeringCompany: "",
          leaderInChargeOfEngineeringCompany: "",
          groupCompanyControlDepartment: "",
          leaderInChargeOfGroupCompany: "",
        }],
        msg:{},
        name:this.$route.params.name,
        submitData:{},
        list:[
        ],
        columns: [
          {
            title: '项目管控部门',
            key: 'projectManagementDepartment',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.projectManagementDepartment,
                  size: 'small',
                  maxlength: 20,
                },
                on: {
                  input: val => {
                    this.tableForm[0].projectManagementDepartment = val
                  }
                }
              })
            }
          },
          {
            title: '项目部分管领导',
            key: 'projectManagementLeader',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.projectManagementLeader,
                  size: 'small',
                  maxlength: 20,
                },
                on: {
                  input: val => {
                    this.tableForm[0].projectManagementLeader = val
                  }
                }
              })
            }
          },
          {
            title: '项目部主管领导',
            key: 'leaderInChargeOfProjectDepartment',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.leaderInChargeOfProjectDepartment,
                  size: 'small',
                  maxlength: 20,
                },
                on: {
                  input: val => {
                    this.tableForm[0].leaderInChargeOfProjectDepartment = val
                  }
                }
              })
            }
          },
          {
            title: '工程公司管理部门',
            key: 'controlDepartmentOfEngineeringCompany',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.controlDepartmentOfEngineeringCompany,
                  size: 'small',
                  maxlength: 20,
                  disabled:this.$route.params.level == 4
                },
                on: {
                  input: val => {
                    this.tableForm[0].controlDepartmentOfEngineeringCompany = val
                  }
                }
              })
            }
          },
          {
            title: '工程公司分管领导',
            key: 'leaderInChargeOfEngineeringCompany',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.leaderInChargeOfEngineeringCompany,
                  size: 'small',
                  maxlength: 20,
                  disabled:this.$route.params.level == 4
                },
                on: {
                  input: val => {
                    this.tableForm[0].leaderInChargeOfEngineeringCompany = val
                  }
                }
              })
            }
          },
          {
            title: '集团公司管理部门',
            key: 'groupCompanyControlDepartment',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.groupCompanyControlDepartment,
                  size: 'small',
                  maxlength: 20,
                  disabled:this.$route.params.level == 3 || this.$route.params.level == 4
                },
                on: {
                  input: val => {
                    this.tableForm[0].groupCompanyControlDepartment = val
                  }
                }
              })
            }
          },
          {
            title: '集团公司分管领导',
            key: 'leaderInChargeOfGroupCompany',
            align: 'center',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.leaderInChargeOfGroupCompany,
                  size: 'small',
                  maxlength: 20,
                  disabled:this.$route.params.level == 3 || this.$route.params.level == 4
                },
                on: {
                  input: val => {
                    this.tableForm[0].leaderInChargeOfGroupCompany = val
                  }
                }
              })
            }
          },
        ],
        measureTypeList:[
          {id:1,name:'管理'},
          {id:2,name:'技术'},
        ]
      }
    },
    methods: {
      ...mapMutations(['closeTag']),
      //跳转详情
      SaveBtn(id){
        let person = {
          id:id,
          joinType:this.joinType
        }
        localStorage.setItem('joinUser', JSON.stringify(person));
        this.closeTag({
          name: this.$route.name,
          params: this.$route.params,
          query: this.$route.query,
        });
      },
      getFrequency(){
        this.$api.measurePlan.getFrequency().then(res => {
          if (res.code == 200) {
            this.list = res.data;
            if(localStorage.getItem('measuresData')){
                this.msg =JSON.parse(localStorage.getItem('measuresData'))
                if(this.msg){
                    this.formData.riskOrderId = this.msg.riskOrderId
                    this.formData.measures = this.msg.measures
                    this.formData.measureType = this.msg.measureType
                    this.formData.frequencyId = this.msg.frequencyId
                    this.tableForm[0].projectManagementDepartment = this.msg.projectManagementDepartment
                    this.tableForm[0].projectManagementLeader = this.msg.projectManagementLeader
                    this.tableForm[0].leaderInChargeOfProjectDepartment = this.msg.leaderInChargeOfProjectDepartment
                    this.tableForm[0].controlDepartmentOfEngineeringCompany = this.msg.controlDepartmentOfEngineeringCompany
                    this.tableForm[0].leaderInChargeOfEngineeringCompany = this.msg.leaderInChargeOfEngineeringCompany
                    this.tableForm[0].groupCompanyControlDepartment = this.msg.groupCompanyControlDepartment
                    this.tableForm[0].leaderInChargeOfGroupCompany = this.msg.leaderInChargeOfGroupCompany
                }
            }
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      //提交
      saveSubmit(){
        if(!this.formData.measures){
          this.$Message.warning('管控措施不能为空')
          return;
        }
        if(!this.formData.measureType){
          this.$Message.warning('措施类型不能为空')
          return;
        }
        if(!this.tableForm[0].projectManagementDepartment){
          this.$Message.warning('项目管控部门不能为空')
          return;
        }
        if(!this.tableForm[0].projectManagementLeader){
          this.$Message.warning('项目部分管领导不能为空')
          return;
        }
        if(!this.tableForm[0].leaderInChargeOfProjectDepartment){
          this.$Message.warning('项目部主管领导不能为空')
          return;
        }
        if(this.$route.params.level == 1 || this.$route.params.level == 2) {
          if (!this.tableForm[0].controlDepartmentOfEngineeringCompany) {
            this.$Message.warning('工程公司管理部门不能为空')
            return;
          }
          if (!this.tableForm[0].leaderInChargeOfEngineeringCompany) {
            this.$Message.warning('工程公司分管领导不能为空')
            return;
          }
        }
        if(this.$route.params.level != 4 && this.$route.params.level != 3){
          if(!this.tableForm[0].groupCompanyControlDepartment){
            this.$Message.warning('集团公司管理部门不能为空')
            return;
          }
          if(!this.tableForm[0].leaderInChargeOfGroupCompany){
            this.$Message.warning('集团公司分管领导不能为空')
            return;
          }
        }
        this.list.forEach(item=>{
          if(item.id == this.formData.frequencyId){
            this.frequencyName = item.frequencyName;
          }
        })

        this.submitData = {
          riskOrderId:this.$route.params.id,
          measures:this.formData.measures,
          measureType:this.formData.measureType,
          frequencyId:this.formData.frequencyId,
          frequencyName:this.frequencyName,
          projectManagementDepartment:this.tableForm[0].projectManagementDepartment,
          projectManagementLeader:this.tableForm[0].projectManagementLeader,
          leaderInChargeOfProjectDepartment:this.tableForm[0].leaderInChargeOfProjectDepartment,
          controlDepartmentOfEngineeringCompany:this.tableForm[0].controlDepartmentOfEngineeringCompany,
          leaderInChargeOfEngineeringCompany:this.tableForm[0].leaderInChargeOfEngineeringCompany,
          groupCompanyControlDepartment:this.tableForm[0].groupCompanyControlDepartment,
          leaderInChargeOfGroupCompany:this.tableForm[0].leaderInChargeOfGroupCompany,
        }
          localStorage.setItem('measuresData',JSON.stringify(this.submitData))
          this.closetab();
      },
      closetab(){
          this.closeTag({
              name: this.$route.name,
              params: this.$route.params
          })
      }
    },
    mounted () {
        this.getFrequency();

    }

  }
</script>
<style>
  .tree-box{
    background-color: #ffffff;
    border: 1px solid #dcdee2;
  }
  .table-box{
    background-color: #ffffff;
    margin-left:20px;
    border: 1px solid #dcdee2;
  }
  .tree{
    width: 250px;
    margin-left: 20px;
    margin-top: 15px;
    overflow: auto;
    height: 200px;
  }
  .checkPersonType{
    margin-bottom: 40px;
  }
</style>